<template>
  <div class="searchbox">
    <div v-if="searchState=='0'">
      <el-empty description="未找到你需要的课程"></el-empty>
    </div>
    <div v-if="searchState=='1'">
      <div class="searchbox2">
        <div v-for="(course, i) in searchCourse" @click="courseckick(course.id)" :key="i">
          <div class="searchbox_coursebox">
            <img :src="course.courseCover" alt="">
            <div>
              <h2>{{ course.courseName }}</h2>
              <p>{{ course.courseInformation }}</p>
              <p style="padding-top: 2vh;color:rgba(148, 146, 146, 0.8);">{{ course.courseDate }}</p>
            </div>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      searchState: '1',
      searchCourse: []
    }
  },
  mounted() {
    var that = this
    axios({
      method: 'get',
      url: 'api/LikeCourse',
      params: {
        CourseName: that.$store.state.CourseName
      }
    }).then(function (res) {
      console.log(res.data)
      if (res.data != '') {
        that.searchState = '1'
        that.searchCourse = res.data
      } else {
        that.searchState = '0'
      }
    })
  },
  methods: {
    courseckick(id) {
      console.log(1)
      this.$store.state.CourseId = id
      this.$router.replace('/secondsheets/CourseDetails')
    }
  }
}
</script>

<style>
.searchbox {
  width: 98.9vw;
  height: 100vh;
  padding-top: 5vh;
}

.searchbox2 {
  width: 60%;
  height: 100%;
  margin: auto;

}

.searchbox_coursebox {
  width: 100%;
  height: 19vh;
  padding: 1vh;
  /* background-color: aquamarine; */
  display: flex;
}

.searchbox_coursebox img {
  width: 20vw;
  height: 100%;
}

.viplabel {
  width: 40%;
  height: 15%;
  background-color: #fadb41;
  float: right;
  text-align: center;
  position: absolute;
  top: 1px;
  left: 70%;
  transform: rotate(45deg)

  /* transform: translate(-50%, -50%); */
}

.searchbox_coursebox h2 {
  margin-left: 1vw;
  float: left;
}

.searchbox_coursebox p {
  margin-top: 1vh;
  margin-left: 1vw;
  float: left;
}
</style>